<template>
    <u-search placeholder="回复" v-model="keyword" animation class="mgb40" searchIconSize="0" actionText="回复"></u-search>
    <view class="container">
        <view class="content">
            <view class="item item-center"><span>昨天 12:35</span></view>
            <chatBox tellName="left"></chatBox>
            <chatBox tellName="right"></chatBox>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import chatBox from './chatBox.vue';
const keyword = ref();
</script>

<style lang="scss">
.container {
    height: 500px;
    border-radius: 4px;
    border: 0.5px solid #e0e0e0;
    background-color: #f5f5f5;
    display: flex;
    flex-flow: column;
    overflow: hidden;
    .content {
        width: calc(100% - 40px);
        padding: 20px;
        overflow-y: scroll;
        flex: 1;
        &:hover::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.1);
        }
    }
}
.item-center {
    @include flex-box-set();
    span {
        font-size: 18rpx;
        padding: 2px 4px;
        color: #fff;
        background-color: #dadada;
        border-radius: 6rpx;
        -moz-user-select: none; /*火狐*/
        -webkit-user-select: none; /*webkit浏览器*/
        -ms-user-select: none; /*IE10*/
        -khtml-user-select: none; /*早期浏览器*/
        user-select: none;
    }
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width: 10px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    border-radius: 8px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0);
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
</style>
